<div class="page-header">
	<h1>Buttons &amp; Icons <small><i class="ace-icon fa fa-angle-double-right"></i> Common Buttons &amp; Icons</small></h1>
</div>

<div class="row"><div class="col-xs-12">



<div class="row">
 <div class="col-xs-12">
	<h3 class="header smaller lighter green">Application Buttons</h3>
	<p>
		<a href="" class="btn btn-default btn-app radius-4">
			<i class="ace-icon fa fa-cog bigger-230"></i>
			Default
			<span class="badge badge-pink">+3</span>
		</a>
		
		<a href="" class="btn btn-app btn-primary no-radius">
			<i class="ace-icon fa fa-pencil-square-o bigger-230"></i>
			Edit
			<span class="badge badge-warning badge-left">11</span>
		</a>
		
		<a href=""  class="btn btn-app btn-success">
			<i class="ace-icon fa fa-refresh bigger-230"></i>
			Reload
		</a>
		
		<button class="btn btn-app btn-warning">
			<i class="ace-icon fa fa-undo bigger-230"></i>
			Undo
		</button>

		<a href="" class="btn btn-app btn-info btn-sm no-radius">
			<i class="ace-icon fa fa-envelope bigger-200"></i>
			Mailbox
			<span class="label label-inverse arrowed-in">6+</span>
		</a>
		
		<button class="btn btn-app btn-danger btn-sm">
			<i class="ace-icon fa fa-trash-o bigger-200"></i>
			Delete
		</button>
		
		<button class="btn btn-app btn-purple btn-sm">
			<i class="ace-icon fa fa-cloud-upload bigger-200"></i>
			Upload
		</button>
		
		<button class="btn btn-app btn-pink btn-sm">
			<i class="ace-icon fa fa-share bigger-200"></i>
			Share
		</button>
		
		<button class="btn btn-app btn-inverse btn-xs">
			<i class="ace-icon fa fa-lock bigger-160"></i>
			Lock
		</button>
		
		<button class="btn btn-app btn-grey btn-xs radius-4">
			<i class="ace-icon fa fa-floppy-o bigger-160"></i>
			Save
			<span class="badge badge-transparent"><i class="light-red ace-icon fa fa-asterisk"></i></span>
		</button>
		
		<button class="btn btn-app btn-light btn-xs">
			<i class="ace-icon fa fa-print bigger-160"></i>
			Print
		</button>


		<a href="" class="btn btn-app btn-yellow btn-xs">
			<i class="ace-icon fa fa-shopping-cart bigger-160"></i>
			Shop
		</a>
		
		
		<div uib-dropdown class="btn-group">
			<button class="btn btn-app btn-pink btn-xs">
				<i class="ace-icon fa fa-share bigger-175"></i>
				Share
			</button>
			<button uib-dropdown-toggle class="btn btn-app btn-pink btn-xs dropdown-toggle"><span class="bigger-110 ace-icon fa fa-caret-down icon-only"></span></button>
			<ul class="dropdown-menu dropdown-pink">
			  <li><a href="">Action</a></li>
			  <li><a href="">Another action</a></li>
			  <li><a href="">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="">Separated link</a></li>
			</ul>
		</div><!-- /.btn-group -->
		
		
	</p>
 </div>
</div>

<div class="space"></div>

<div class="row">

 <div class="col-sm-6" id="default-buttons">
	<h3 class="row header smaller lighter purple">
		<span class="col-sm-6">
			Default Buttons
		</span><!-- /.col -->
		<span class="col-sm-6">
			<label class="pull-right inline">
				<small class="muted smaller-90">Border:</small>
				<input ng-model="buttonBorder" ng-init="buttonBorder = true" type="checkbox" class="ace ace-switch ace-switch-5" />
				<span class="lbl middle"></span>
			</label>
		</span><!-- /.col -->
	</h3><!-- /.row -->

	<p>
		<button class="btn" ng-class="{'no-border': !buttonBorder}">Default </button>
		<button class="btn btn-primary" ng-class="{'no-border': !buttonBorder}">Primary</button>
		<button class="btn btn-info" ng-class="{'no-border': !buttonBorder}">Info</button>
		<button class="btn btn-success" ng-class="{'no-border': !buttonBorder}">Success</button>
	</p>
	<p>
		<button class="btn btn-warning" ng-class="{'no-border': !buttonBorder}">Warning</button>
		<button class="btn btn-danger" ng-class="{'no-border': !buttonBorder}">Danger</button>
		<button class="btn btn-inverse" ng-class="{'no-border': !buttonBorder}">Inverse</button>
		<button class="btn btn-pink" ng-class="{'no-border': !buttonBorder}">Pink</button>
	</p>
	<p>
		<button class="btn btn-purple" ng-class="{'no-border': !buttonBorder}">Purple</button>
		<button class="btn btn-yellow" ng-class="{'no-border': !buttonBorder}">Yellow</button>
		<button class="btn btn-grey" ng-class="{'no-border': !buttonBorder}">Grey</button>
		<button class="btn btn-light" ng-class="{'no-border': !buttonBorder}">Light</button>
		<button class="btn btn-link">Link</button>
	</p>
	
	<p>
		<button type="button" class="btn btn-white" ng-class="{'no-border': !buttonBorder}">White</button>
		<button type="button" class="btn btn-white btn-default" ng-class="{'no-border': !buttonBorder}">Default</button>
		<button type="button" class="btn btn-white btn-primary" ng-class="{'no-border': !buttonBorder}">Primary</button>
		<button type="button" class="btn btn-white btn-info" ng-class="{'no-border': !buttonBorder}">Info</button>
		<button type="button" class="btn btn-white btn-success" ng-class="{'no-border': !buttonBorder}">Success</button>
		<button type="button" class="btn btn-white btn-warning" ng-class="{'no-border': !buttonBorder}">Warning</button>
	</p>
	<p>
		<button type="button" class="btn btn-white btn-danger btn-sm" ng-class="{'no-border': !buttonBorder}">Danger</button>
		<button type="button" class="btn btn-white btn-yellow btn-sm" ng-class="{'no-border': !buttonBorder}">Yellow</button>
		<button type="button" class="btn btn-white btn-pink btn-sm" ng-class="{'no-border': !buttonBorder}">Pink</button>
		<button type="button" class="btn btn-white btn-purple btn-sm" ng-class="{'no-border': !buttonBorder}">Purple</button>
		<button type="button" class="btn btn-white btn-inverse btn-sm" ng-class="{'no-border': !buttonBorder}">Inverse</button>
	</p>
	
	<h3 class="header smaller lighter green">Button with Icons</h3>
	<p>
		<button class="btn btn-white btn-info btn-bold">
			<i class="ace-icon fa fa-floppy-o bigger-120 blue"></i> Backup
		</button>
		<button class="btn btn-white btn-warning btn-bold">
			<i class="ace-icon fa fa-trash-o bigger-120 orange"></i> Delete
		</button>
		<button class="btn btn-white btn-default btn-round">
			<i class="ace-icon fa fa-times red2"></i> Cancel
		</button>
	</p>
	<div class="hr hr-dotted hr-16"></div>
	<p>
		<button class="btn"><i class="ace-icon fa fa-pencil align-top bigger-125"></i> Default </button>
		<button class="btn btn-primary"><i class="ace-icon fa fa-flask align-top bigger-125"></i> Primary</button>
		<button class="btn btn-info">Info <i class="ace-icon fa fa-print  align-top bigger-125 icon-on-right"></i></button>
	</p>
	<p>
		<button class="btn btn-lg btn-success"><i class="ace-icon fa fa-check"></i> Success</button>
		<button class="btn btn-sm btn-warning"><i class="ace-icon fa fa-fire bigger-110"></i> <span class="bigger-110 no-text-shadow">Warning</span></button>
		<button class="btn btn-xs btn-danger"><i class="ace-icon fa fa-bolt bigger-110"></i> Danger <i class="ace-icon fa fa-arrow-right icon-on-right"></i></button>
	</p>
	<p>
		<button class="btn btn-info"><i class="ace-icon fa fa-signal icon-only bigger-150"></i></button>
		<button class="btn btn-warning btn-xs"><i class="ace-icon fa fa-wrench  bigger-110 icon-only"></i></button>		
		<button class="btn btn-danger btn-sm"><i class="ace-icon fa fa-reply icon-only"></i></button>
		<button class="btn btn-grey btn-lg"><i class="ace-icon fa fa-trash-o fa-2x icon-only"></i></button>
	</p>
 </div><!-- /.col -->

 <div class="col-sm-6">
	<h3 class="header smaller lighter red">Button Sizing</h3>
	<p>
		<button class="btn btn-minier btn-yellow">Minier</button>
		<button class="btn btn-xs">Mini</button>
		<button class="btn btn-sm btn-primary">Small</button>
		<button class="btn btn-info">Default</button>
		<button class="btn btn-lg btn-success">Large Size</button>
	</p>
	
	<p>
		<button class="btn btn-warning btn-xlg">Larger Size</button>
		<button class="btn btn-danger">Default</button>
		<button class="btn btn-sm btn-inverse">Small</button>
		<button class="btn btn-xs btn-pink">Pink</button>
		<button class="btn btn-minier btn-purple">Purple</button>
	</p>
	
	<h3 class="header smaller lighter grey">Disabled Buttons</h3>
	<p>
		<button class="btn disabled">Default </button>
		<button class="btn disabled btn-primary">Primary</button>
		<button class="btn disabled btn-info">Info</button>
		<button class="btn disabled btn-success">Success</button>
	</p>
	<hr />
	<p>
		<button class="btn btn-danger btn-block">Block Button</button>
	</p>
	
 </div><!-- /.col -->

</div><!-- /.row -->


<hr />


<div class="row">

 <div class="col-sm-6">
	<h3 class="header smaller lighter blue">Button Groups</h3>
	<p>
		<div class="btn-group">
			<button type="button" class="btn">1</button>
			<button type="button" class="btn">2</button>
			<button type="button" class="btn">3</button>
		</div>
	
	<p>
	  <div class="btn-group">
		  <button type="button" class="btn btn-white btn-sm btn-primary">Left</button>
		  <button type="button" class="btn btn-white btn-sm btn-primary">Middle</button>
		  <button type="button" class="btn btn-white btn-sm btn-primary">Right</button>
	  </div>

	<p>
		<div class="btn-toolbar">
			<div class="btn-group">
				<button class="btn btn-light">1</button>
				<button class="btn btn-light">2</button>
				<button class="btn btn-light">3</button>
				<button class="btn btn-light">4</button>
			</div>
			<div class="btn-group btn-corner">
				<button class="btn">5</button>
				<button class="btn">6</button>
				<button class="btn">7</button>
			</div>
			<div class="btn-group">
				<button class="btn btn-grey">8</button>
			</div>
		</div>

	<p>
		<div class="btn-group btn-group-vertical">
			<button class="btn" type="button"><i class="icon-only ace-icon fa fa-align-left"></i></button>
			<button class="btn" type="button"><i class="icon-only ace-icon fa fa-align-center"></i></button>
			<button class="btn" type="button"><i class="icon-only ace-icon fa fa-align-right"></i></button>
			<button class="btn" type="button"><i class="icon-only ace-icon fa fa-align-justify"></i></button>
		</div>

		<div class="space-6"></div>
		
	<p>
		<button type="button" class="btn btn-success" ng-click="toggleLoading()" ng-disabled="loading" ng-bind="loading ? 'Loading ...' : 'Loading state'"></button>
		<button type="button" class="btn btn-primary" ng-model="singleToggle" uib-btn-checkbox>Single Toggle</button>

		<button type="button" class="btn btn-sm btn-danger" data-toggle="button" >Small</button>
		<button type="button" class="btn btn-xs btn-info" data-toggle="button" >Mini</button>

	
	<p>
	  <div>
		<span>Checkbox: &nbsp;</span>
		<div class="btn-group">
			<label class="btn btn-sm" ng-model="checkbox1.bold" uib-btn-checkbox>
				<i class="icon-only ace-icon fa fa-bold bigger-110"></i>
			</label>
			<label class="btn btn-sm" ng-model="checkbox1.italic" uib-btn-checkbox>
				<i class="icon-only ace-icon fa fa-italic bigger-110"></i>
			</label>
			<label class="btn btn-sm" ng-model="checkbox1.underline" uib-btn-checkbox>
				<i class="icon-only ace-icon fa fa-underline bigger-110"></i>
			</label>
		</div>
	  </div>

	<p>
	  <div>
		<span>Checkbox: &nbsp;</span>
		<div class="btn-group btn-overlap btn-corner">
			<label class="btn btn-sm btn-white btn-info" ng-model="checkbox2.bold" uib-btn-checkbox>
				<i class="icon-only ace-icon fa fa-bold bigger-110"></i>
			</label>
			<label class="btn btn-sm btn-white btn-info" ng-model="checkbox2.italic" uib-btn-checkbox>
				<i class="icon-only ace-icon fa fa-italic bigger-110"></i>
			</label>
			<label class="btn btn-sm btn-white btn-info" ng-model="checkbox2.underline" uib-btn-checkbox>
				<i class="icon-only ace-icon fa fa-underline bigger-110"></i>
			</label>
		</div>
	  </div>
	
	<p>
	  <div>
		<span>Radio: &nbsp;</span>
		<div class="btn-group">
			<label class="btn btn-primary" ng-model="radio1" uib-btn-radio="1">
				<i class="icon-only ace-icon fa fa-align-left"></i>
			</label>
			<label class="btn btn-primary" ng-model="radio1" uib-btn-radio="2">
				<i class="icon-only ace-icon fa fa-align-center"></i>
			</label>
			<label class="btn btn-primary" ng-model="radio1" uib-btn-radio="3">
				<i class="icon-only ace-icon fa fa-align-right"></i>
			</label>
		</div>
		<label class="btn btn-primary" ng-model="justify" uib-btn-checkbox>
			<i class="icon-only ace-icon fa fa-align-justify"></i>
		</label>
	  </div>

 </div><!-- /.span -->

 <div class="col-sm-6">
	<h3 class="header smaller lighter green">Button Dropdown</h3>
	<p>
		<div class="btn-toolbar">
		  <div uib-dropdown class="btn-group">
			<button uib-dropdown-toggle class="btn dropdown-toggle">Action <span class="ace-icon fa fa-caret-down icon-on-right"></span></button>
			<ul class="dropdown-menu dropdown-default">
			  <li><a href="">Action</a></li>
			  <li><a href="">Another action</a></li>
			  <li><a href="">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="">Separated link</a></li>
			</ul>
		  </div><!-- /.btn-group -->
		  <div uib-dropdown class="btn-group">
			<button uib-dropdown-toggle class="btn btn-primary btn-white dropdown-toggle">Action <i class="ace-icon fa fa-angle-down icon-on-right"></i></button>
			<ul class="dropdown-menu">
			  <li><a href="">Action</a></li>
			  <li><a href="">Another action</a></li>
			  <li><a href="">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="">Separated link</a></li>
			</ul>
		  </div><!-- /.btn-group -->
		  <div uib-dropdown class="btn-group">
			<button uib-dropdown-toggle class="btn btn-sm btn-danger dropdown-toggle">Danger <i class="ace-icon fa fa-angle-down icon-on-right"></i></button>
			<ul class="dropdown-menu dropdown-danger">
			  <li><a href="">Action</a></li>
			  <li><a href="">Another action</a></li>
			  <li><a href="">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="">Separated link</a></li>
			</ul>
		  </div><!-- /.btn-group -->
		</div>

		<div class="space-4"></div>

		<div class="btn-toolbar">
		  <div uib-dropdown class="btn-group">
			<button uib-dropdown-toggle class="btn btn-warning dropdown-toggle">Warning <span class="ace-icon fa fa-caret-down icon-on-right"></span></button>
			<ul class="dropdown-menu dropdown-warning">
			  <li><a href="">Action</a></li>
			  <li><a href="">Another action</a></li>
			  <li><a href="">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="">Separated link</a></li>
			</ul>
		  </div><!-- /.btn-group -->
		  <div uib-dropdown class="btn-group">
			<button uib-dropdown-toggle class="btn btn-success btn-lg dropdown-toggle">Success large <i class="ace-icon fa fa-angle-down icon-on-right"></i></button>
			<ul class="dropdown-menu dropdown-success dropdown-menu-right">
			  <li><a href="">Action</a></li>
			  <li><a href="">Another action</a></li>
			  <li><a href="">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="">Separated link</a></li>
			</ul>
		  </div><!-- /.btn-group -->
		</div>
		
		<div class="space-4"></div>
		
		<div class="btn-toolbar">
		  <div uib-dropdown class="btn-group">
			<button uib-dropdown-toggle class="btn btn-info btn-sm dropdown-toggle">Info small <span class="ace-icon fa fa-caret-down icon-on-right"></span></button>
			<ul class="dropdown-menu dropdown-info dropdown-menu-right">
			  <li><a href="">Action</a></li>
			  <li><a href="">Another action</a></li>
			  <li><a href="">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="">Separated link</a></li>
			</ul>
		  </div><!-- /.btn-group -->
		  <div uib-dropdown class="btn-group">
			<button uib-dropdown-toggle class="btn btn-inverse btn-xs dropdown-toggle">Inverse mini <span class="ace-icon fa fa-caret-down icon-on-right"></span></button>
			<ul class="dropdown-menu dropdown-inverse">
			  <li><a href="">Action</a></li>
			  <li><a href="">Another action</a></li>
			  <li><a href="">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a href="">Separated link</a></li>
			</ul>
		  </div><!-- /.btn-group -->
		</div>

	<hr />
	<p>
		<div class="btn-toolbar">
			<div uib-dropdown class="btn-group">
                <button class="btn">Action</button>
                <button uib-dropdown-toggle class="btn dropdown-toggle"><span class="ace-icon fa fa-caret-down icon-only"></span></button>
                <ul class="dropdown-menu">
                  <li><a href="">Action</a></li>
                  <li><a href="">Another action</a></li>
                  <li><a href="">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="">Separated link</a></li>
                </ul>
              </div><!-- /.btn-group -->
              <div uib-dropdown class="btn-group">
                <button class="btn btn-sm btn-yellow">Some Action</button>
                <button uib-dropdown-toggle class="btn btn-sm btn-yellow dropdown-toggle"><i class="ace-icon fa fa-angle-down icon-only"></i></button>
                <ul class="dropdown-menu dropdown-yellow">
                  <li><a href="">Action</a></li>
                  <li><a href="">Another action</a></li>
                  <li><a href="">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="">Separated link</a></li>
                </ul>
              </div><!-- /.btn-group -->
              <div uib-dropdown class="btn-group dropup">
                <button class="btn btn-xs btn-danger">Danger</button>
                <button uib-dropdown-toggle class="btn btn-xs btn-danger dropdown-toggle"><span class="ace-icon fa fa-caret-down icon-only"></span></button>
                <ul class="dropdown-menu dropdown-danger">
                  <li><a href="">Action</a></li>
                  <li><a href="">Another action</a></li>
                  <li><a href="">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="">Separated link</a></li>
                </ul>
              </div><!-- /.btn-group -->
			</div>

			<div class="space-2"></div>

			<div class="btn-toolbar">
              <div uib-dropdown class="btn-group">
                <button class="btn btn-lg btn-warning">Warning</button>
                <button uib-dropdown-toggle class="btn btn-lg btn-warning dropdown-toggle"><span class="ace-icon fa fa-caret-down icon-only smaller-90"></span></button>
                <ul class="dropdown-menu dropdown-warning">
                  <li><a href="">Action</a></li>
                  <li><a href="">Another action</a></li>
                  <li><a href="">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="">Separated link</a></li>
                </ul>
              </div><!-- /.btn-group -->
              <div uib-dropdown class="btn-group">
                <button class="btn btn-success">Success</button>
                <button uib-dropdown-toggle class="btn btn-success dropdown-toggle"><span class="ace-icon fa fa-caret-down icon-only"></span></button>
                <ul class="dropdown-menu dropdown-success">
                  <li><a href="">Action</a></li>
                  <li><a href="">Another action</a></li>
                  <li><a href="">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="">Separated link</a></li>
                </ul>
              </div><!-- /.btn-group -->
              <div uib-dropdown class="btn-group">
                <button class="btn btn-info btn-white">Info</button>
                <button uib-dropdown-toggle class="btn btn-info btn-white dropdown-toggle"><span class="ace-icon fa fa-caret-down icon-only"></span></button>
                <ul class="dropdown-menu dropdown-info dropdown-menu-right">
                  <li><a href="">Action</a></li>
                  <li><a href="">Another action</a></li>
                  <li><a href="">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="">Separated link</a></li>
                </ul>
              </div><!-- /.btn-group -->
			</div>
			
			<div class="space-2"></div>
			
		    <div class="btn-toolbar">
              <div uib-dropdown class="btn-group">
                <button class="btn btn-inverse">Inverse</button>
                <button uib-dropdown-toggle class="btn btn-inverse dropdown-toggle"><span class="ace-icon fa fa-caret-down icon-only"></span></button>
                <ul class="dropdown-menu dropdown-inverse">
                  <li><a href="">Action</a></li>
                  <li><a href="">Another action</a></li>
                  <li><a href="">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="">Separated link</a></li>
                </ul>
              </div><!-- /.btn-group -->
            </div>
			

 </div><!-- /.span -->

</div><!-- /.row -->


<hr />


<div class="row">
	<div class="col-sm-6">
		<h3 class="header smaller lighter green">Lables & Badges</h3>
		<p>
			<span class="label">Default</span>
			<span class="label label-success arrowed">Success</span>
			<span class="label label-warning">
				<i class="ace-icon fa fa-exclamation-triangle bigger-120"></i> Warning
			</span>
			<span class="label label-danger arrowed-in">Danger</span>
			<span class="label label-info arrowed-in-right arrowed">Info</span>
			<span class="label label-inverse">Inverse</span>
		</p>
		
		<p>
			<span class="label label-white middle">Default</span>
			<span class="label label-success label-white middle">Success</span>
			<span class="label label-warning label-white middle">
				<i class="ace-icon fa fa-exclamation-triangle bigger-120"></i> Warning
			</span>
			<span class="label label-danger label-white middle">Danger</span>
			<span class="label label-info label-white middle">Info</span>
			<span class="label label-purple label-white middle">Inverse</span>
		</p>
		
		<p>
			<span class="badge">1</span>
			<span class="badge badge-grey">1</span>
			<span class="badge badge-success">2</span>
			<span class="badge badge-warning">4</span>
			<span class="badge badge-danger">6</span>
			<span class="badge badge-info">8</span>
			<span class="badge badge-purple">3</span>
			<span class="badge badge-inverse">10</span>
			<span class="badge badge-pink">11</span>
			<span class="badge badge-yellow">2</span>
		</p>
		
		<p>
			<span class="label label-lg label-pink arrowed-right">Large</span>
			<span class="label label-lg label-yellow arrowed-in arrowed-in-right">Yellow</span>
			<span class="label label-lg label-purple arrowed">Purple</span>
		</p>
		<p>
			<span class="label label-xlg label-primary arrowed arrowed-right">Larger</span>
			<span class="label label-xlg label-grey arrowed-in-right arrowed-in">Grey</span>
			<span class="label label-xlg label-light arrowed-in-right">Light</span>
		</p>
		<p>
			<span class="label label-sm label-primary arrowed arrowed-right">Smaller</span>
		</p>

	</div><!-- /.span -->
	
	<div class="col-sm-6">
		<h3 class="header smaller lighter red">Pagination</h3>
		<div>
			<uib-pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" direction-links="false" first-text="&laquo;" last-text="&raquo;"></uib-pagination>
        </div>

		<div>
			<uib-pager total-items="totalItems" ng-model="currentPage" next-text="Newer &rarr;" previous-text="&larr; Older"></uib-pager>
		</div>
		
	</div><!-- /.span -->
</div><!-- /.row -->


<hr />

<div>
	<h3 class="header smaller lighter blue">369 Scalable FontAwesome Icons <small><a href="http://fontawesome.io/icons/" target="_blank">(see all icons <i class="ace-icon fa fa-external-link"></i>)</a> </small></h3>

	<div class="row" ng-init="fontAwesomeChunks = arrayChunk(fontAwesome, 19)">
	  <div class="col-xs-6 col-sm-3" ng-repeat="chunk in ::fontAwesomeChunks">
		<ul class="list-unstyled">
			<li ng-repeat="icon in ::chunk"><i class="ace-icon fa" ng-class="[icon]"></i> <span ng-bind="icon"></span></li>
		</ul>
	  </div>
	</div>
</div>



<hr />

<div>
	<h3 class="header smaller lighter blue">200 Scalable Glyphicons <small><a href="http://getbootstrap.com/components/#glyphicons" target="_blank">(see all icons <i class="ace-icon fa fa-external-link"></i>)</a> </small></h3>

	<div class="row" ng-init="glyphiconChunks = arrayChunk(glyphicon, 19)">
	  <div class="col-xs-6 col-sm-3" ng-repeat="chunk in ::glyphiconChunks">
		<ul class="list-unstyled">
			<li ng-repeat="icon in ::chunk"><i class="ace-icon glyphicon" ng-class="[icon]"></i> <span ng-bind="icon"></span></li>
		</ul>
	  </div>
	</div>
</div>




</div></div>